<template>
	<view class="member">
		<view class="topFixed" style="width: 100%; position: fixed; top: 0; z-index: 2; background: #ebbe87">
			<view>
				<view :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
					<view class="flex flex-1 align-center" style="padding-left: 24rpx">
						<view style="font-size: 0"></view>
						<view class="text-overflow1" style="font-size: 30rpx; color: #333333"></view>
						<view style="font-size: 0"></view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">会员中心</view>
					<view class="flex-1"></view>
				</view>
			</view>
			<view
				style="
					height: 340rpx;
					position: relative;
					background: url(https://sz.vvv5g.com/assets/img/remote/member/header_back.png);
					background-size: 750rpx 450rpx;
					background-repeat: no-repeat;
					background-position: 0 -20rpx;
				"
			>
				<view class="flex align-center" style="padding-top: 56rpx; margin-left: 60rpx">
					<view style="font-size: 0">
						<image style="width: 64rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/remote/member/vip.png"></image>
					</view>
					<view style="font-size: 36rpx; color: #333333; font-weight: 800; margin-left: 20rpx">
						{{ memberData.name == undefined ? '您还没有登录' : memberData.name }}
					</view>
				</view>

				<view class="con_content">
					<view class="touxiang">
						<image :src="memberData.avatar"></image>
					</view>
					<view class="xian"></view>
					<view class="flex">
						<view class="con_box fblod txtali" v-if="memberData.identity == '1'">注册会员</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '2'">店铺会员</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '3'">{{ memberData.position }}</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '4'">城市合伙人</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '5'">店铺合伙人</view>
						<view class="shouru_btn flex align-center" @click="onIncomeList">
							<view class="btn_txt s24 family f500">我的收入</view>
							<view class="shouru_icon" style="font-size: 0">
								<image class="w100 h100" src="../../static/member/shouru.png"></image>
							</view>
						</view>
					</view>
					<view v-if="memberData.identity != '1' && memberData.identity != '2'" class="con_box fblod txtali" style="width: 180upx" @click="getAddress">
						邀请码：{{ memberData.invite_code || '' }}
					</view>
				</view>
				<view style="font-size: 0; position: absolute; bottom: 0rpx; width: 100%">
					<image style="width: 750rpx; height: 106rpx" src="https://sz.vvv5g.com/assets/img/wxImg/memberTop.png"></image>
				</view>
			</view>
		</view>
		<view :style="'height:' + topFixedHeight + 'px;'"></view>

		<view v-if="false" class="header_box w750">
			<view class="title f500 family txtali">会员中心</view>
			<view class="con_back">
				<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/header_back.png"></image>
				<view class="vip_name flex">
					<view class="vip_img">
						<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/vip.png"></image>
					</view>
					<view class="name">
						{{ memberData.name == undefined ? '您还没有登录' : memberData.name }}
					</view>
				</view>
				<view class="con_content">
					<view class="xian"></view>
					<view class="flex">
						<view class="con_box fblod txtali" v-if="memberData.identity == '1'">注册会员</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '2'">店铺会员</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '3'">{{ memberData.position }}</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '4'">城市合伙人</view>
						<view class="con_box fblod txtali" v-if="memberData.identity == '5'">店铺合伙人</view>
						<view class="shouru_btn flex" @click="onIncomeList">
							<view class="btn_txt s24 family f500">我的收入</view>
							<view class="shouru_icon">
								<image class="w100 h100" src="../../static/member/shouru.png"></image>
							</view>
						</view>
					</view>
					<view class="con_box fblod txtali" style="width: 180upx" v-if="memberData.invite_code && memberData.identity != '2' && memberData.identity != '1'" @click="getAddress">
						邀请码：{{ memberData.invite_code }}
					</view>
				</view>
			</view>
			<image class="header_img w100" src="https://sz.vvv5g.com/assets/img/remote/member/Intersect.png"></image>
		</view>
		<view class="content_box">
			<block v-if="memberData.identity == '3' || (memberData.identity == '2' && memberData.shop)">
				<view class="title f500 family">所属商家</view>
				<view class="sj_box flex">
					<view class="store_icon">
						<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/store.png"></image>
					</view>
					<view class="left_txt_box flex flex-column justify-center">
						<view style="max-height: 90rpx; width: 95%">
							<view class="store_top_txt f500 family" v-for="(item, index) in memberData.shop" :key="index">
								{{ item.shopname }}
							</view>
						</view>
					</view>
					<view class="zx_xian" v-if="memberData.identity == '3'"></view>
					<view class="right_box" @click="goAdministration" v-if="memberData.identity == '3'">
						<view style="width: 50rpx; height: 40rpx; margin: 0 auto">
							<image class="w100 h100" src="../../static/member/guanli.png"></image>
						</view>
						<view class="zhanghu_txt f500 family s20">在线管理</view>
					</view>
				</view>
			</block>
			<view class="zhanghu_box flex" v-if="['1', '2', '3', '4', '5'].includes(memberData.identity)">
				<view class="left_box flex flexjus">
					<view class="list_box txtali">
						<view class="top_txt f500 family">
							{{ memberData.order.init }}
						</view>
						<view class="bottom_txt f500 family s20">待审核</view>
					</view>
					<view class="list_box txtali">
						<view class="top_txt f500 family">
							{{ memberData.order.issued }}
						</view>
						<view class="bottom_txt f500 family s20">待提现</view>
					</view>
					<view class="list_box txtali">
						<view class="top_txt f500 family">
							{{ memberData.order.ing }}
						</view>
						<view class="bottom_txt f500 family s20">提现中</view>
					</view>
					<view class="list_box txtali">
						<view class="top_txt f500 family">
							{{ memberData.order.total }}
						</view>
						<view class="bottom_txt f500 family s20">累计提现</view>
					</view>
				</view>
				<view class="zh_xian"></view>
				<view class="right_box" @click="goWithdrawal">
					<view class="zhanghu_img">
						<image class="w100 h100" src="../../static/member/zhanghu.png"></image>
					</view>
					<view class="zhanghu_txt f500 family s20">我的账户</view>
				</view>
			</view>
			<view class="sjine_box flex" style="margin-top: 20rpx" v-if="memberData.identity < 3">
				<view class="sleft_box txtali" @click="to_lockMoney">
					<view class="s_top_txt f800">
						{{ suodingmoney || 0 }}
					</view>
					<view class="s_bottom_txt fblod s24">锁定总金额(元)</view>
				</view>
				<view class="s_xian"></view>
				<view class="sleft_box txtali">
					<view class="s_top_txt f800">
						{{ jiesuanmoney || 0 }}
					</view>
					<view class="s_bottom_txt fblod s24">
						解锁金额(元)
						<image class="help" src="@/static/answer/wenhao.png" @click="openLockPopup"></image>
					</view>
				</view>
			</view>
			<view class="recommend_box" v-if="['2', '3', '4', '5'].includes(memberData.identity)">
				<view class="rec_top_box flex flexjus">
					<view style="width: 222upx">
						<view class="rec_top_txt fblod familytow">推荐客户</view>
						<view class="rec_bottom_txt f400 familythree s22">推荐客户下单领取奖励</view>
					</view>
					<view class="rec_btn family s22 f500 txtali" @click.stop="goTuijian">去推荐</view>
				</view>
				<view @click.stop="tuJL" class="rec_bottom_box flex align-center" v-if="['2', '3', '4', '5'].includes(memberData.identity)">
					<view class="tuijian_icon_box" style="font-size: 0">
						<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/tuijian.png"></image>
					</view>
					<view class="tuijian_xq f500 family s24">推荐记录</view>
					<view class="tuijian_xj f500 family s22" style="width: unset">我推荐的客户商家跟进详情</view>
				</view>
			</view>
			<block v-if="['3', '4', '5'].includes(memberData.identity)">
				<view class="title_two f500 family s28">可提现明细</view>
				<view class="scroll_box" v-if="rebateList.length != 0">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" show-scrollbar="true">
						<view class="scroll-view-item uni-bg-red flex" v-for="(item, index) in rebateList" :key="index">
							<view class="head_img">
								<image class="w100 h100" :src="item.avatar"></image>
							</view>
							<view class="scr_con_txt">
								<view class="scr_name fblod familythree s26">
									{{ item.name }}
								</view>
								<view class="scr_sj_txt f500 family s22">
									{{ item.title }}
								</view>
							</view>
							<view class="qian_date_box">
								<view class="qian_txt f500 family s20">￥{{ item.price }}</view>
								<view class="date_box f500 family s22">
									{{ get_date(item.created_at) }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</block>
			<view class="dd_box flex" v-if="['2', '3', '4', '5'].includes(memberData.identity)">
				<view class="dd_list_box" v-if="memberData.identity == '2'" @click="openLockPopup">
					<view class="dd_img_box">
						<image class="dd_image jssm_icon"></image>
					</view>
					<view class="dd_txt f500 family s20">解锁说明</view>
				</view>
				<!--  -->
				<view v-if="['3', '4', '5'].includes(memberData.identity)" class="dd_list_box" @click="myTd">
					<view class="dd_img_box">
						<image class="dd_image td_icon"></image>
					</view>
					<view class="dd_txt f500 family s20">我的团队</view>
				</view>
				<view class="dd_list_box" @click="goRecommendOrder">
					<view class="dd_img_box">
						<image class="dd_image tj_icon"></image>
					</view>
					<view class="dd_txt f500 family s20">推荐订单</view>
				</view>
				<view class="dd_list_box" @click="goRebateDetail">
					<view class="dd_img_box">
						<image class="dd_image fl_icon"></image>
					</view>
					<view class="dd_txt f500 family s20">返利明细</view>
				</view>
				<view v-if="memberData.identity == '4' || memberData.identity == '5'" class="dd_list_box" @click="gohehuioren">
					<view class="dd_img_box">
						<image class="dd_image fl2_icon"></image>
					</view>
					<view class="dd_txt f500 family s20">店铺合伙人</view>
				</view>
				<view v-if="memberData.identity != '4' && memberData.identity != '5'" class="dd_xian"></view>
				<view v-if="memberData.identity != '4' && memberData.identity != '5'" class="cj_dd txtali" style="margin-top: 28upx">
					<view class="cj_dd_num s40 family f500">
						{{ memberData.order_num.init }}
					</view>
					<view class="cj_dd_txt s20 family f500">成交订单</view>
				</view>
			</view>
			<view class="dd_box flex" v-if="['1', '2', '3', '4', '5'].includes(memberData.identity)">
				<view class="cj_dd txtali" @click="goBalance">
					<view class="cj_dd_num s40 family f500">
						{{ memberData.balance || 0 }}
					</view>
					<view class="cj_dd_txt s20 family f500">充值余额</view>
				</view>
				<view class="dd_xian" style="margin-left: 70upx"></view>
				<view class="dd_list_box" @click="goRecharge" style="margin-left: 50upx; margin-right: 100upx">
					<view class="dd_img_box">
						<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/jilv.png"></image>
					</view>
					<view class="dd_txt f500 family s24">充值记录</view>
				</view>
				<view class="dd_list_box" style="margin-left: 0upx" @click="goConsumption">
					<view class="dd_img_box">
						<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/jilv.png"></image>
					</view>
					<view class="dd_txt f500 family s24">消费记录</view>
				</view>
			</view>
			<view class="ran_king" v-if="['2', '3', '4', '5'].includes(memberData.identity)">
				<ran-king
					:title="title"
					:list="list"
					:showTwo="memberData.identity"
					:jidu="jidu"
					:showOne="memberData.identity"
					:txtShow="txtShow"
					:listTwo="listTwo"
					:userInfo="memberData"
				></ran-king>
			</view>
		</view>
		<view class="baijing" v-if="show">
			<view class="bj_box">
				<view class="bj_head_img">
					<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/remote/member/tuijian_xuz.png"></image>
				</view>
				<view class="bj_bon_box">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y">
						<view id="demo1" class="scroll-view-item uni-bg-red f500 s26 family">
							<rich-text :nodes="tjTxt"></rich-text>
						</view>
					</scroll-view>
				</view>
				<view class="flex">
					<view class="left_btn s32 familytow fblod txtali" @click="noProcess">不同意</view>
					<view class="right_btn s32 familytow fblod txtali" @click="goProcess">同意</view>
				</view>
			</view>
		</view>
		<uni-popup ref="lockPopup" type="center">
			<view class="lock-popup">
				<view class="title">解锁说明</view>
				<view class="content">
					<rich-text :nodes="unlockTxt"></rich-text>
				</view>
				<view class="close-btn" @click="closeLockPopup">关闭</view>
			</view>
		</uni-popup>
		<!-- 是否有邀请弹窗返利会员 -->
		<uni-popup ref="isInvite" type="center">
			<view class="dialog-container">
				<view class="title">
					<uni-icons class="icon" type="info-filled" size="24" color="#FF3F4A"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">{{ userName }}邀请您一起成为“{{ storeName }}”店铺合伙人，推荐该店铺商品可获得高于城市合伙人30%的收益。</view>
				<view class="btn-group">
					<view class="btn cancel" @click="refuse">不加入</view>
					<view class="btn confirm" @click="agreeInvite">加入</view>
				</view>
			</view>
		</uni-popup>
		<!-- 是否有邀请弹窗员工管理 -->
		<uni-popup ref="isInvites" type="center">
			<view class="dialog-container">
				<view class="title">
					<uni-icons class="icon" type="info-filled" size="24" color="#FF3F4A"></uni-icons>
					<text>提示</text>
				</view>
				<view class="content">{{ userNames }}，邀请你成为{{ storeNames }}店铺员工</view>
				<view class="btn-group">
					<view class="btn cancel" @click="refuses">不加入</view>
					<view class="btn confirm" @click="agreeInvites">加入</view>
				</view>
			</view>
		</uni-popup>
		<!-- 商家职员是否有管理权限 -->
		<uni-popup ref="tips" type="center">
			<view class="dialog-container">
				<view class="title">温馨提示</view>
				<view class="content" style="text-align: center; text-indent: 0">您无在线管理权限</view>
				<view class="btn-group">
					<view class="btn confirm" @click="cancel">我知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import ranKing from '../../components/ranKing.vue';
export default {
	components: {
		ranKing
	},
	data() {
		return {
			title: '城市合伙人排行',
			list: [
				{
					name: '返利排行'
				},
				{
					name: '业绩排行'
				},
				{
					name: '选择门店'
				}
			],
			listTwo: [
				{
					name: '解锁排行'
				},
				{
					name: '选择门店'
				}
			],
			jidu: [
				{
					name: '季度'
				},
				{
					name: '年度'
				},
				{
					name: '往年统计'
				}
			],
			showOne: true,
			showTwo: true,
			txtShow: true,
			show: false,
			memberData: {},
			rebateList: [],
			unlockData: {},
			unlockTxt: '',
			tjTxt: '',
			userName: '', //被邀请人名字
			storeName: '', //店铺名字
			inviteId: 0,
			userNames: '', //被邀请人名字
			storeNames: '', //店铺名字
			inviteIds: 0,
			suodingmoney: 0,
			jiesuanmoney: 0,
			navBarInfo: {},
			topFixedHeight: 0
		};
	},
	onLoad() {
		//identity 1=注册会员，2=返利会员，3=商家职员，4=城市合伙人，5=店铺合伙人
		this.navBarInfo = this.$navBarInfo;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.topFixed')
				.boundingClientRect((data) => {
					this.topFixedHeight = data.height;
				})
				.exec();
		}, 300);
		this.getRebateDetail();
		this.getconfig();
		this.getUnlock();
		this.getUnlockTxt();
	},
	onShow() {
		this.getMemberData();
		//判断有没有邀请
		this.isInvite();
		this.$request({
			url: 'member/list',
			method: 'POST',
			data: {}
		}).then((res) => {
			this.suodingmoney = res.data.data.quota;
			this.jiesuanmoney = res.data.data.rebate;
		});
	},
	methods: {
		// 同意邀请
		agreeInvite() {
			this.$request({
				url: 'partners/partner_success',
				method: 'POST',
				data: {
					id: this.inviteId,
					status: '1'
				}
			}).then((res) => {
				this.$refs.isInvite.close();
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			});
		},
		//拒绝邀请
		refuse() {
			this.$request({
				url: 'partners/partner_success',
				method: 'POST',
				data: {
					id: this.inviteId,
					status: 0
				}
			}).then((res) => {
				this.$refs.isInvite.close();
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			});
		},
		// 同意邀请
		agreeInvites() {
			this.$request({
				url: 'Shopuser/user_sure',
				method: 'POST',
				data: {
					id: this.inviteIds,
					type: 0
				}
			}).then((res) => {
				this.$refs.isInvites.close();
				this.getMemberData();
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			});
		},
		//拒绝邀请
		refuses() {
			// 员工拒绝同意
			this.$request({
				url: 'Shopuser/user_sure',
				method: 'POST',
				data: {
					id: this.inviteIds,
					type: 1
				}
			}).then((res) => {
				this.$refs.isInvites.close();
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			});
		},
		//判断有没有邀请
		isInvite() {
			this.$request({
				url: 'Shopuser/have_user',
				method: 'POST',
				data: {}
			}).then((res) => {
				if (res.data.data != null) {
					this.inviteIds = res.data.data.id;
					this.userNames = res.data.data.suser?.nickname;
					this.storeNames = res.data.data.shop.shopname;
					this.$refs.isInvites.open();
				}
			});
			this.$request({
				url: 'Partners/have_info',
				method: 'POST',
				data: {}
			}).then((res) => {
				if (res.data.data != null) {
					this.inviteId = res.data.data.id;
					this.userName = res.data.data.puserinfo.nickname;
					this.storeName = res.data.data.shopinfo.shopname;
					this.$refs.isInvite.open();
				}
			});
		},
		// 获取推荐说明
		getconfig() {
			this.$request({
				url: 'common/config',
				method: 'POST',
				data: {
					keyword: 'recommand'
				}
			}).then((res) => {
				this.tjTxt = res.data.data;
			});
		},
		openLockPopup() {
			this.$refs.lockPopup.open();
		},
		closeLockPopup() {
			this.$refs.lockPopup.close();
		},
		// 获取提现明细
		getRebateDetail() {
			this.$request({
				url: 'rebate/detail',
				method: 'POST'
			}).then((res) => {
				this.rebateList = res.data.data;
			});
		},
		getMemberData() {
			let that = this;
			this.$request({
				url: 'member/getInfo',
				method: 'POST'
			}).then((res) => {
				if (res.data.code == 1) {
					that.memberData = res.data.data;
					res.data.data.identity == '2' ? (that.txtShow = false) : (that.txtShow = true);
					res.data.data.identity == '3' ? (that.title = '商家职员内部排行') : res.data.data.identity == '2' ? (that.title = '城市合伙人排行') : '';
				}
			});
		},
		// 获取解锁金额
		getUnlock() {
			this.$request({
				url: 'user/getUnlock'
			}).then((res) => {
				this.unlockData = res.data.data;
			});
		},
		// 获取解锁说明
		getUnlockTxt() {
			this.$request({
				url: 'common/config',
				data: {
					keyword: 'unlock'
				},
				method: 'POST'
			}).then((res) => {
				this.unlockTxt = res.data.data;
			});
		},
		goRecommendOrder() {
			uni.navigateTo({
				url: '/pages/filePages/recommendOrder/recommendOrder'
			});
		},
		goRebateDetail() {
			uni.navigateTo({
				url: '/pages/filePages/rebateDetails/rebateDetails'
			});
		},
		// 点击店铺合伙人
		gohehuioren() {
			uni.navigateTo({
				url: '/pages/news/sanqi/hehuoren'
			});
		},
		myTd() {
			uni.navigateTo({
				url: '/pages/filePages/myTeam/myTeam'
			});
		},
		onBusiness() {
			if (this.memberData.identity == 3 && this.memberData.positions == 1) {
				uni.navigateTo({
					url: '/pages/filePages/myClient/myClient'
				});
			} else {
				uni.navigateTo({
					url: '/pages/filePages/business/business'
				});
			}
		},
		onIncomeList() {
			uni.navigateTo({
				url: '/pages/filePages/incomeList/incomeList'
			});
		},
		goBalance() {
			uni.navigateTo({
				url: '../filePages/rechargeRecord/balance?balance=' + this.memberData.balance
			});
		},
		goRecharge() {
			uni.navigateTo({
				url: '../filePages/rechargeRecord/rechargeRecord'
			});
		},
		goConsumption() {
			uni.navigateTo({
				url: '../filePages/rechargeRecord/consumption'
			});
		},
		toServer() {
			uni.navigateTo({
				url: '../filePages/membershipPage/server'
			});
		},
		goAdministration() {
			const { shop } = this.memberData;
			const flag = shop.some((item) => item.on_line == 1);
			if (flag) {
				uni.navigateTo({
					url: `../filePages/administration/administration`
				});
			} else {
				//商家职员没有管理权限
				this.$refs.tips.open();
			}
		},
		cancel() {
			this.$refs.tips.close();
		},
		goWithdrawal() {
			uni.navigateTo({
				url: '../filePages/membershipPage/withdrawal'
			});
		},
		to_lockMoney() {
			uni.navigateTo({
				url: '../filePages/membershipPage/lock_money'
			});
		},
		goTuijian() {
			this.show = true;
		},
		goProcess() {
			uni.navigateTo({
				url: '../filePages/membershipPage/process'
			});
			this.show = false;
		},
		noProcess() {
			this.show = false;
		},
		// 推荐详情
		tuJXQ() {},
		// 推荐记录
		tuJL() {
			uni.navigateTo({
				url: '/pages/filePages/membershipPage/recommend?obj=' + JSON.stringify({ JL: true })
			});
		}
	}
};
</script>

<style scoped lang="scss">
// 顶部
.con_content {
	// 顶部头像
	.touxiang {
		position: absolute;
		left: -130rpx;
		top: 0rpx;
		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	position: relative;
	left: 170rpx;
	top: -26rpx;

	.xian {
		width: 24upx;
		height: 2upx;
		background: #8a600c;
		margin-top: 70upx;
	}

	.con_box {
		width: 104upx;
		height: 44upx;
		background: #e0a66c;
		border-radius: 8upx 8upx 8upx 8upx;
		font-size: 20upx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #ffffff;
		line-height: 44upx;
		margin-top: 20upx;
	}

	.shouru_btn {
		width: 162upx;
		height: 47upx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 20upx 0 0 20upx;
		margin-top: 12rpx;
		margin-left: 118rpx;
		position: absolute;
		right: 182upx;

		.btn_txt {
			color: #ebbe87;
			line-height: 47upx;
			margin-left: 22upx;
		}

		.shouru_icon {
			width: 8upx;
			height: 16upx;
			margin-left: 20upx;
		}
	}
}
.member {
	height: 100%;
	background: #f4f5f9;

	.lock-popup {
		width: 660upx;
		height: calc(100vh - 400upx);
		background-color: #fff;
		border-radius: 16upx;

		.title {
			width: 100%;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			font-size: 40upx;
			font-weight: bold;
			color: #dda867;
		}

		.content {
			width: 100%;
			height: calc(100vh - 600upx);
			box-sizing: border-box;
			padding: 30upx;
			overflow: auto;
		}

		.close-btn {
			width: 100%;
			text-align: center;
			height: 100upx;
			line-height: 100upx;
			box-sizing: border-box;
			font-size: 34upx;
			font-weight: bold;
			color: #dda867;
			padding-bottom: 18upx;
			border-top: 2upx solid #eee;
		}
	}

	.baijing {
		width: 100%;
		height: 1624upx;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 3;
		.bj_box {
			width: 552upx;
			background: #ffffff;
			border-radius: 32upx 32upx 32upx 32upx;
			margin: 50% auto;

			.bj_head_img {
				width: 552upx;
				height: 168upx;
			}
		}

		.bj_bon_box {
			width: 486upx;
			height: 426upx;
			margin: 26upx auto;

			.scroll-Y {
				height: 426upx;

				.scroll-view-item {
					color: #333333;
				}
			}
		}

		.left_btn {
			width: 276upx;
			height: 100upx;
			background: #cccccc;
			border-radius: 0upx 0upx 0upx 32upx;
			color: #ffffff;
			line-height: 100upx;
		}

		.right_btn {
			width: 278upx;
			height: 100upx;
			background: #ebbe87;
			border-radius: 0upx 0upx 32upx 0upx;
			line-height: 100upx;
			color: #844902;
		}
	}

	.header_box {
		height: 470upx;
		background: #ebbe87;
		overflow: hidden;

		.title {
			font-size: 32upx;
			color: #ffffff;
			margin-top: 108rpx;
		}

		.con_back {
			width: 686upx;
			height: 348upx;
			margin: 0 auto;

			.vip_name {
				margin-left: 62rpx;
				margin-top: -286rpx;

				.vip_img {
					width: 62upx;
					height: 42upx;
				}

				.name {
					font-size: 36upx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					color: #333333;
					margin-left: 20upx;
				}
			}

			.con_content {
				position: relative;
				left: 150rpx;
				top: -26rpx;

				.xian {
					width: 24upx;
					height: 2upx;
					background: #8a600c;
					margin-top: 70upx;
				}

				.con_box {
					width: 104upx;
					height: 44upx;
					background: #e0a66c;
					border-radius: 8upx 8upx 8upx 8upx;
					font-size: 20upx;
					font-family: PingFang SC-Bold, PingFang SC;
					color: #ffffff;
					line-height: 44upx;
					margin-top: 20upx;
				}

				.shouru_btn {
					width: 162upx;
					height: 47upx;
					background-color: rgba(0, 0, 0, 0.3);
					border-radius: 20upx 0 0 20upx;
					margin-top: 12rpx;
					margin-left: 118rpx;
					position: absolute;
					right: 182upx;

					.btn_txt {
						color: #ebbe87;
						line-height: 47upx;
						margin-left: 22upx;
					}

					.shouru_icon {
						width: 8upx;
						height: 16upx;
						margin-left: 20upx;
					}
				}
			}
		}

		.header_img {
			margin-top: -104rpx;
			height: 171rpx;
		}
	}

	.content_box {
		padding-left: 32upx;
		padding-right: 32upx;

		.title {
			font-size: 28upx;
			color: #333333;
			margin-top: 10upx;
		}

		.sj_box {
			width: 686upx;
			height: 136upx;
			background: #fff;
			border-radius: 16upx 16upx 16upx 16upx;
			margin-top: 24upx;

			.store_icon {
				width: 56upx;
				height: 56upx;
				margin-top: 40upx;
				margin-left: 32upx;
			}

			.left_txt_box {
				flex: 1;
				width: 322upx;
				height: 90upx;
				overflow: hidden;
				margin-top: 28upx;
				margin-left: 24upx;
				overflow-y: scroll;
				.store_top_txt {
					width: 100%;
					height: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 26upx;
					color: #666;
					margin-bottom: 10upx;
				}
			}

			.zx_xian {
				width: 2upx;
				height: 48upx;
				background-color: #eaeaea;
				margin-top: 46upx;
			}

			.right_box {
				padding: 36rpx 26rpx 0;

				.zhanghu_img {
					width: 45upx;
					height: 42upx;
					margin: 0 auto;
				}

				.zhanghu_txt {
					margin-top: 10upx;
					color: #666666;
				}
			}
		}

		.zhanghu_box {
			width: 686upx;
			height: 136upx;
			background: #ffffff;
			border-radius: 16upx 16upx 16upx 16upx;
			margin-top: 24upx;

			.left_box {
				width: 488upx;
				padding-left: 32upx;

				.list_box {
					.top_txt {
						font-size: 36upx;
						color: #000000;
						margin-top: 30upx;
					}

					.bottom_txt {
						color: #666666;
						margin-top: 6upx;
					}
				}
			}

			.zh_xian {
				width: 2upx;
				height: 48upx;
				background-color: #eaeaea;
				margin-top: 46upx;
				margin-left: 36upx;
			}

			.right_box {
				margin-left: 26rpx;
				margin-top: 36rpx;

				.zhanghu_img {
					width: 45upx;
					height: 42upx;
					margin: 0 auto;
				}

				.zhanghu_txt {
					font-family: PingFang SC-Bold, PingFang SC;
					color: #d09f65;
					margin-top: 10upx;
				}
			}
		}

		.sjine_box {
			width: 686upx;
			height: 136upx;
			background: #ffffff;
			border-radius: 16rpx;

			.sleft_box {
				margin-left: 94upx;

				.s_top_txt {
					font-size: 44upx;
					font-family: PingFang SC-Heavy, PingFang SC;
					color: #fc5b64;
					margin-top: 20upx;
				}

				.s_bottom_txt {
					font-family: PingFang SC-Bold, PingFang SC;
					color: #333333;
					margin-top: 10upx;
					.help {
						width: 32rpx;
						height: 32rpx;
						margin-left: 8rpx;
						vertical-align: middle;
					}
				}
			}

			.s_xian {
				width: 2upx;
				height: 48upx;
				background: #eaeaea;
				margin-top: 40upx;
				margin-left: 80upx;
			}
		}

		.recommend_box {
			width: 686upx;
			background: #fcf7f4;
			border-radius: 16upx 16upx 16upx 16upx;
			margin-top: 20upx;

			.rec_top_box {
				width: 562upx;
				height: 98upx;
				background: linear-gradient(270deg, #ebbe87 0%, #f8e8d6 100%);
				border-radius: 16upx 16upx 16upx 16upx;
				padding: 20upx 58upx 0 66upx;

				.rec_top_txt {
					font-size: 32upx;
					color: #844902;
				}

				.rec_bottom_txt {
					color: #844902;
					margin-top: 4upx;
				}

				.rec_btn {
					width: 136upx;
					height: 58upx;
					background: rgba(132, 73, 2, 0.7);
					border-radius: 29upx 29upx 29upx 29upx;
					color: #ffffff;
					line-height: 58upx;
					margin-top: 12upx;
				}
			}

			.rec_bottom_box {
				margin-left: 66upx;
				margin-top: 26upx;

				.tuijian_icon_box {
					width: 30upx;
					height: 30upx;
				}

				.tuijian_xq {
					width: 96upx;
					height: 34upx;
					color: #333333;
					margin-left: 12upx;
				}

				.tuijian_xj {
					width: 242upx;
					height: 30upx;
					color: #999999;
					margin-left: 12upx;
				}
			}

			.rec_qiehuan {
				padding-left: 50upx;
				padding-right: 50upx;

				.qh_left_box {
					width: 200upx;
					height: 100upx;

					.qh_left_img {
						width: 30upx;
						height: 30upx;
						margin-top: 32upx;

						.glkh_icon {
							background-image: url('');
							background-size: 100% 100%;
						}
					}

					.qh_left_txt {
						color: #333333;
						margin-left: 12upx;
						line-height: 100upx;
					}
				}

				.qh_xian {
					width: 2upx;
					height: 18upx;
					background: #a47030;
					margin-left: 100upx;
					margin-top: 40rpx;
				}
			}
		}

		.title_two {
			color: #333333;
			margin-top: 36upx;
			margin-bottom: 24upx;
		}

		.scroll_box {
			width: 686upx;
			height: 258upx;
			background: #ffffff;
			border-radius: 16upx 16upx 16upx 16upx;

			.scroll-Y {
				height: 258upx;

				.scroll-view-item {
					width: 604upx;
					height: 104upx;
					border-bottom: 2upx solid #f4f5f9;
					margin-left: 32upx;
					padding-top: 26upx;

					.head_img {
						width: 76upx;
						height: 76upx;
						background: #c4c4c4;
						border-radius: 50%;
						overflow: hidden;
					}

					.scr_con_txt {
						margin-left: 18upx;

						.scr_name {
							color: #666666;
						}

						.scr_sj_txt {
							width: 216upx;
							color: #999999;
							margin-top: 12upx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.qian_date_box {
						width: 232upx;
						text-align: right;
						margin-left: 62upx;

						.qian_txt {
							color: #ff3f4a;
						}

						.date_box {
							color: #999999;
							margin-top: 20upx;
						}
					}
				}
			}
		}

		.dd_box {
			width: 686upx;
			height: 160upx;
			background: #ffffff;
			border-radius: 16upx 16upx 16upx 16upx;
			margin-top: 20upx;

			.dd_list_box {
				margin-top: 28upx;
				margin-left: 80upx;

				.dd_img_box {
					width: 64upx;
					height: 64upx;
					background: rgba(235, 190, 135, 0.4);
					border-radius: 50%;
					overflow: hidden;
					margin: 0 auto;

					.dd_image {
						width: 28upx;
						height: 28upx;
						display: block;
						margin: 0 auto;
						margin-top: 18upx;
					}

					.tj_icon {
						background-image: url('');
						background-size: 100% 100%;
					}

					.fl_icon {
						background-image: url('');
						background-size: 100% 100%;
					}
					.fl2_icon {
						background-image: url('');
						background-size: 100% 100%;
					}

					.td_icon {
						background-image: url('');
						background-size: 100% 100%;
					}

					.jssm_icon {
						background-image: url('');
						background-size: 100% 100%;
					}
				}

				.dd_txt {
					color: #666666;
					margin-top: 16upx;
				}
			}

			.dd_list_box:nth-child(1) {
				margin-left: 63upx;
			}

			.dd_xian {
				width: 2upx;
				height: 48upx;
				background: #eaeaea;
				margin-top: 56upx;
				margin-left: 48upx;
			}

			.cj_dd {
				margin-left: 42upx;
				margin-top: 36upx;

				.cj_dd_num {
					color: #000000;
				}

				.cj_dd_txt {
					color: #000000;
					margin-top: 22upx;
				}
			}
		}

		.ran_king {
			margin-top: 20upx;
		}
	}
}
.dialog-container {
	width: 600rpx;
	padding: 32rpx;
	background: #fff;
	border-radius: 32rpx;
	box-sizing: border-box;
	.title {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 12rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 50rpx;
		color: #ff3f4a;
		.icon {
			margin-right: 8rpx;
			transform: rotate(180deg);
		}
		/deep/.uni-icons {
			vertical-align: middle;
		}
	}
	.content {
		padding: 32rpx 0;
		font-size: 30rpx;
		color: #666;
		line-height: 42rpx;
		text-indent: 2em;
	}
	.btn-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 32rpx;
		.btn:only-child {
			width: 100%;
		}
	}
	.btn {
		width: 260rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 30rpx;
		text-align: center;
		border-radius: 10rpx;
	}
	.confirm {
		background: #ebbe87;
		color: #fff;
	}
	.cancel {
		background: #f3f3f3;
		color: #333;
	}
}
</style>
<style>
page {
	height: 100%;
}
</style>
